<template>
	<view class="coupon_container">
		<view class="couponzezhao" @click="closecoupon" v-if="showcoupon"></view>
		<view class="couponview" :class="showcoupon?'showcouponview':''" v-if="showcoupon">
			<view class="title">选择优惠</view>
			<scroll-view scroll-y style="height: 72%;" scroll-with-animation>
				<view class="con" v-if="coupontype==0" v-for="(item, index) in couponList" :key="index" @click="selectCoupon(index)">
					<view class="text">
						省{{ item.amount }}元：满{{ item.minAmount }}减{{ item.amount }}
						<text></text>
						¥{{ item.amount }}
					</view>
					<icon v-if="index === selectcpindex" type="success" color="#f8c301" size="20" />
					<icon v-else type="circle" color="#f8c301" size="20"/>
				</view>
				<view class="con" v-if="coupontype==1" v-for="(item, index) in couponList" :key="index" @click="selectCoupon(index)">
					<view class="text">
						折扣优惠券：{{ item.amount }}折
						<text></text>
					</view>
					<icon v-if="index === selectcpindex" type="success" color="#f8c301" size="20" />
					<icon v-else type="circle" color="#f8c301" size="20"/>
				</view>
				<view class="con" @click="selectCoupon(-1)">
					<view class="text">不使用优惠券</view>
					<icon v-if="selectcpindex == -1" type="success" color="#f8c301" size="20" />
					<icon v-else type="circle" color="#f8c301" size="20"/>
				</view>
			</scroll-view>
			<view class="confirm" @click="confirmcp">确认</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		coupontype: {
			type: Number,
			default: 0,//0是满减。1是折扣
		},
		showcoupon: {
			type: Boolean,
			default: false,//是否显示
		},
		couponList:{
			type:Array,
			default () {
				return [];//优惠券集合数组
			}
		},
	},
	data() {
		return {
			selectcpindex:0,//当前选中的
		};
	},
	mounted() {},
	methods: {
		//关门弹窗
		closecoupon(){
			this.$emit("closecoupon")
		},
		//选择
		selectCoupon(index){
		   this.selectcpindex = Number(index)
		},
		//确认
		confirmcp(){
			this.$emit("confirmCoupon",this.selectcpindex)
		},
	}
};
</script>

<style lang="scss" scoped>
.coupon_container {
	width: 100%;
	height: 100%;
}
/* 优惠券选择 */
.couponzezhao {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0, 0, 0, 0.7);
	z-index: 100;
	top: 0;
	left: 0;
}
.couponview {
	width: 100%;
	height: 68%;
	position: fixed;
	background-color: #ffffff;
	z-index: 888;
	bottom: 0;
	left: 0;
	border-radius: 18rpx 18rpx 0 0;
	transform: translateY(100%);
	transition: .7s;
}
.showcouponview {
	transform: translateY(0);
}		
.couponview .title {
	height: 8%;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 2%;
}
.couponview .con {
	width: 700rpx;
	height: 88rpx;
	margin: 0 auto;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: left;
}
.couponview .con .text {
	font-size: 30rpx;
}
.couponview .con .text text{
	margin-left: 18rpx;
}
.couponview .con icon {
	margin-left: auto;
}
.couponview .confirm {
	width: 700rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	color: #ffffff;
	position: absolute;
	bottom: 3%;
	left: 25rpx;
	border-radius: 88rpx;
	background:linear-gradient(90deg,rgba(252, 198, 0,1) 0%,rgba(252, 198, 0,0.8) 99%);
}
</style>
